<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div class="con" class="act" myattr="myval">
        <!--我是注释-->
        <p>我是span</p>
        我是文本
    </div>
    <script>
        // 节点类型
        // 获取container里的所有节点
        var ocon = document.querySelector(".con");
        var ele = ocon.childNodes;
        console.log(ele);
        // 节点类型 ： nodeType是 1 ：证明这个节点是元素节点 如果是2： 证明是属性节点  3：证明是文本节点 8：是注释节点
        // 每一个节点都会有节点名:nodeName  和节点值:nodeValue
        //1.获取元素节点 ，元素节点的nodeType 1  节点名是大写的标签名 节点值是null
        var eleNode = ele[1];
        console.log(eleNode.nodeType);
        if (eleNode.nodeType == 8) {
            console.log("元素节点");
            console.log(eleNode.nodeName);
            console.log(eleNode.nodeValue);
        }
        // 2.文本节点   节点类型 nodeType ：3   节点名 nodeName ：text  节点值nodeValue： 文本的内容
        /*  var textNode = ele[2];
                  console.log(textNode.nodetype);
                  console.log(textNode.nodeName);
                  console.log(textNode.nodeValue); */

        // 3.注释节点 节点类型 nodeType:8 节点名 nodeName：comment 节点值 nodeValue :注释内容；
        /*  var commentNode = ele[0];
              console.log(commentNode.nodeType);
              console.log(commentNode.nodeName);
              console.log(commentNode.nodeValue); */
        // 4.属性节点 ； nodeType是2   节点名：nodeName是属性名 节点值 nodeValue 是属性值；
        // 获取元素节点的属性
        /*  var attrs = ocon.attributes; // 获取元素的所有属性内容；
            console.log(attrs);
            var myattr = attrs[1];
            console.log(myattr.nodeType);
            console.log(myattr.nodeName);
            console.log(myattr.nodeValue); */
        // 总结 ： 节点分类 nodeType
        /* 
                    1.元素节点( nodeName ：大写标签名 nodeValue:null ) 
                    2.属性节点(nodeName: 属性名 nodeValue：属性值)  
                    3.文本节点（nodeName：text nodeValue：文本内容）  
                    8 注释节点（nodeName：comment ；nodeVlaue：注释内容）；
            */
    </script>
</body>

</html>